<template>
	<view class="contain padding margin-bottom" :class="{'small-job':small}">
		<view class="flex justify-between">
			<view class="text-gray">
				<image class="cu-avatar round" :src="data?.company?.logo||data?.job?.logo" mode="aspectFill"></image>
				{{data?.company?.company_name||data?.job?.company_name}}
			</view>
			<text class="iconfont icon-bookmark-o text-xl"></text>
		</view>
		<view class="padding-tb-sm text-xl">
			{{data?.company?.industry||data?.job?.job_title}}
		</view>
		<view class="text-gray padding-bottom-sm">
			{{data?.company?.location||data?.job?.location}}
			· 
			<text class="text-orange">{{data?.company?.category||data?.job?.employment_type}}</text>
		</view>
		<view class="text-gray padding-bottom-sm text-cut" v-if="!small">
			{{data?.company?.introduction||data?.job?.description}}
		</view>
		
		<view class="flex justify-between text-gray">
			<view class="">
				<text class="iconfont icon-renqun"></text>
				{{data?.company?.company_size||data?.job.views}}
				<text class="iconfont icon-browse"></text>
				{{data?.company?.followers||data?.job.followers}}
			</view>
			<text v-if="!small">30分钟前</text>
		</view>
	</view>
</template>

<script setup lang="ts">
import type { CompanyType, JobType } from '@/model/company';

defineProps<{
	small?:boolean,
	data:{
		company:CompanyType,
		job:JobType
	}
}>()
</script>

<style>
.contain{
	border: 1upx solid #eee;
	border-radius: 10upx;
	flex-shrink: 0;
}
.contain.small-job{
	width: 400upx;
	margin-right: 30upx;
}
.cu-avatar{
	width: 40upx;
	height: 40upx;
}
</style>